<template>
	<view class="change-sign-page">
		<customNavbar name="修改签名" @saveHandleClick="saveSign" :isChange="sign !== '' ? true : false "></customNavbar>
		<view class="change-sign">
			<u--textarea v-model="sign" count maxlength="50" height="430rpx" border="none" class="color"></u--textarea>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from "vuex"
	import {
		userUpdate
	} from '@/api/user.js'
	import {userInfoApi} from '../../api/index.js'
	import customNavbar from './common/customNavbar.vue'
	export default {
		components: {
			customNavbar
		},
		data() {
			return {
				sign:'',
			}
		},
		computed: {
			...mapState({
				userInfo: (state) => state.userInfo,
			})
		},
		onLoad() {
			console.log(this.userInfo)
			this.sign = this.userInfo.sign
		},
		methods: {
			//保存按钮点击事件
			saveSign() {
				if (this.sign) {
					this.updateSign() //调用更新接口
				}
			},
			
			//更新签名
			async updateSign() {
				try{
					const res = await userUpdate({
						sign:this.sign,
						username:this.userInfo.nickname,
						sex:this.userInfo.sex
					})
					
					const userInfoRes = await userInfoApi()
					this.$store.commit('setUserInfo',userInfoRes.data)
					
					uni.showToast({
						title:'操作成功',
						icon:'none'
					})
					setTimeout(()=> {
						uni.navigateBack()
					}, 800);
					
				}catch(e){
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.change-sign-page {
		padding: 0 40rpx;
		.change-sign {
			padding-top: 64rpx;
			.color {
				background-color: #F7F7F7;
			}
		}
	}
</style>
